// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
import echarts from 'echarts'
const staticOption = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}'
  },
  series: [{
    name: '',
    type: 'gauge',
    radius: '80%',
    center: ['50%', '50%'],
    min: 0,
    max: 100,
    title: {
      show: true,
      offsetCenter: [0, '40%'],
      color: '#d9e7ff',
      fontSize: 18
    },
    axisLine: {
      lineStyle: {
        width: 20,
        color: [
          [0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#0066ff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00fffc'
          }
          ], false)],
          [0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ffeebe'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#ffcc65'
          }
          ], false)],
          [1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ff8893'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#df0050'
          }
          ], false)]
        ]
      }
    },
    axisTick: { // 坐标轴小标记
      length: 5,
      lineStyle: {
        color: '#072c8f'
      }
    },
    splitLine: { // 分隔线
      length: 20,
      lineStyle: {
        color: '#072c8f'
      }
    },
    axisLabel: {
      show: true,
      distance: 5,
      color: '#d9e7ff',
      fontSize: 18
    },
    pointer: {
      width: 8,
      length: '60%'
    },
    detail: {
      // formatter: function (value) {
      //   return 1
      // },
      color: '#fff',
      offsetCenter: [0, '60%'],
      fontSize: 30
    },
    data: []
  }
  ]
}

const staticOptionMid = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}'
  },
  series: [{
    name: '',
    type: 'gauge',
    radius: '90%',
    center: ['50%', '50%'],
    min: 0,
    max: 100,
    title: {
      show: true,
      offsetCenter: [0, '40%'],
      color: '#d9e7ff',
      fontSize: 14
    },
    axisLine: {
      lineStyle: {
        width: 15,
        color: [
          [0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#0066ff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00fffc'
          }
          ], false)],
          [0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ffeebe'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#ffcc65'
          }
          ], false)],
          [1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ff8893'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#df0050'
          }
          ], false)]
        ]
      }
    },
    axisTick: { // 坐标轴小标记
      length: 5,
      lineStyle: {
        color: '#072c8f'
      }
    },
    splitLine: { // 分隔线
      length: 20,
      lineStyle: {
        color: '#072c8f'
      }
    },
    axisLabel: {
      show: true,
      distance: 5,
      color: '#d9e7ff',
      fontSize: 14
    },
    pointer: {
      width: 8,
      length: '60%'
    },
    detail: {
      // formatter: function (value) {
      //   value = (value + '').split('.');
      //   value.length < 2 && (value.push('00'));
      //   return ('00' + value[0]).slice(-2) +
      //     '.' + (value[1] + '00').slice(0, 2);
      // },
      color: '#fff',
      offsetCenter: [0, '60%'],
      fontSize: 28
    },
    data: []
  }
  ]
}

const staticOptionSmall = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}'
  },
  series: [{
    name: '',
    type: 'gauge',
    radius: '100%',
    center: ['50%', '55%'],
    min: 0,
    max: 100,
    title: {
      show: true,
      offsetCenter: [0, '40%'],
      color: '#d9e7ff',
      fontSize: 16
    },
    axisLine: {
      lineStyle: {
        width: 20,
        color: [
          [0.3, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#0066ff'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#00fffc'
          }
          ], false)],
          [0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ffeebe'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#ffcc65'
          }
          ], false)],
          [1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            // 0% 处的颜色
            offset: 0,
            color: '#ff8893'
          }, {
            // 100% 处的颜色
            offset: 1,
            color: '#df0050'
          }
          ], false)]
        ]
      }
    },
    axisTick: { // 坐标轴小标记
      length: 5,
      lineStyle: {
        color: '#072c8f'
      }
    },
    splitLine: { // 分隔线
      length: 20,
      lineStyle: {
        color: '#072c8f'
      }
    },
    axisLabel: {
      show: true,
      distance: 5,
      color: '#d9e7ff',
      fontSize: 16
    },
    pointer: {
      width: 8,
      length: '60%'
    },
    detail: {
      // formatter: function (value) {
      //   value = (value + '').split('.');
      //   value.length < 2 && (value.push('00'));
      //   return ('00' + value[0]).slice(-2) +
      //     '.' + (value[1] + '00').slice(0, 2);
      // },
      color: '#fff',
      offsetCenter: [0, '60%'],
      fontSize: 26
    },
    data: []
  }
  ]
}

// 备选颜色，有需求则进行循环
const colors = ['#00fffc', '#ffdb84', '#fb6c84']
// let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // 装配数据 必须使用箭头函数
    this.option.series[0].max = additionalOptions.max
    this.option.series[0].name = additionalOptions.seriesName
    this.option.series[0].data.push({
      value: additionalOptions.value,
      name: additionalOptions.title
    })
    // 根据数据设置title的颜色
    if (this.option.series[0].data[0].value <= this.option.series[0].max * 0.3) {
      this.option.series[0].detail.color = colors[0]
    } else if (this.option.series[0].data[0].value <= this.option.series[0].max * 0.7) {
      this.option.series[0].detail.color = colors[1]
    } else if (this.option.series[0].data[0].value <= this.option.series[0].max) {
      this.option.series[0].detail.color = colors[2]
    }
    // 英文版title过长，缩小字体
    if (additionalOptions.title.indexOf('interface') !== -1) {
      this.option.series[0].title.fontSize = 14
      if (screen === 1366) {
        this.option.series[0].title.fontSize = 12
      }
    }
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
  }

  getOption () {
    return this.option
  }
}

export {ChartFactory}
